<template>
  <div class="checkeds">
    <label :style="{'display': display}">
      <div class="box" :class="{'box-border': checked}">
        <i v-show="checked" class="iconfont icon-tick"></i>
      </div>
      <span :style="{marginLeft: marginLeft, fontSize: fontSize, color: tipColor}" v-if="checkTip && !isClickTip">{{checkTip}}</span>
      <span></span>
      <input
        type="checkbox"
        v-model="checked"
        @change="handleChange">
    </label>
    <span @click="clickTip" v-if="checkTip && isClickTip" class="outTip pointer" :style="{color: tipColor}">{{checkTip}}</span>
  </div>
</template>

<script>
  export default {
    name: 'zz-check',
    data () {
      return {
        checked: false,
        copyDefaultCheck: false
      }
    },
    props: {
      checkTip: {
        type: String,
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      check: {
        type: Boolean,
        default: false
      },
      isAuto: {
        type: Boolean,
        default: false
      },
      /* 根据属性check 来改变checked 状态
        不通过点击checked 状态 */
      isAttributes: {
        type: Boolean,
        default: false
      },
      isClickTip: {
        type: Boolean,
        default: false
      },
      display: {
        type: String,
        default: 'block'
      },
      marginLeft: {
        type: String,
        default: '0'
      },
      checkDefault: {
        type: Number,
        default: 0
      },
      fontSize: {
        type: String,
        default: '14px'
      },
      tipColor: {
        type: String,
        default: '#363c3c'
      },
      // 表格组件用的数据
      tableItem: '',
      data: ''
    },
    watch: {
      check () {
        this.checked = this.check
        if (this.isAuto) {
          this.handleChange()
        }
      },
      checkDefault () {
        this.checked = this.copyDefaultCheck
        if (this.isAuto) {
          this.handleChange()
        }
      }
    },
    methods: {
      handleChange () {
        if (this.disabled) {
          this.checked = !this.checked
          return
        }
        if (this.isAttributes) {
          this.checked = !this.checked
        }
        if (this.data) {
          const obj = {
            state: this.checked,
            value: this.data
          }
          if (this.tableItem) {
            obj['tableData'] = this.tableItem
          }
          this.$emit('handleChange', obj)
        } else {
          this.$emit('handleChange', this.checked)
        }
      },
      clickTip () {
        if (this.data) {
          const obj = {
            state: this.checked,
            value: this.data
          }
          if (this.tableItem) {
            obj['tableData'] = this.tableItem
          }
          this.$emit('clickTip', obj)
        }
      }
    },
    created () {
      this.checked = this.check
      this.copyDefaultCheck = this.check
    }
  }
</script>

<style lang="scss" scoped>
  .checkeds{
    display: inline-block;
    label{
      height: 20px;
      line-height: 20px;
      cursor: pointer;
      position: relative;
      .box{
        width: 16px;
        height: 16px;
        display: inline-block;
        border: 1px solid $color-line;
        color: $color;
        font-size: $font-size-large;
        position: relative;
        background: #fff;
        border-radius: 3px;
        i{
          position: absolute;
          top: 0;
          left: 2px;
          font-size: 12px;
        }
      }
      .box-border{
        border: 1px solid $color;
      }
      .box:hover{
        border: 1px solid $color
      }
      span{
        vertical-align: top;
        font-size: $font-size-small;
      }
    }
    input[type='checkbox']{
      visibility: hidden;
      position: absolute;
      top:0;
      left:0;
    }
    .outTip{
      display: inline-block;
      vertical-align: top;
    }
  }
</style>
